<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
 <style>
*{margin:0;padding:0;}
body{overflow: hidden}
canvas {
  background:
    linear-gradient(
      hsl(200, 50%, 80%) 0%,
      hsl(200, 30%, 95%) 75%)
  ;
  display: block;
}

div {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
#box{
    width:400px;
    height:400px;
    border:5px solid;
    background-color: rgba(240, 248, 255, 0.418);
    position: relative;
    margin: 0 auto;
    top: 22%
}
#picture{
    position: absolute;
    top: 37px;
    left:  37px;
}
#username{
    position: absolute;
    top: 44px;
    left:  45%;
}
#phone{
    position: absolute;
    top: 89px;
    left:  45%;
}
#gender{
    position: absolute;
    top: 165px;
    left:  37px;
}
#birthday{
    position: absolute;
    top: 195px;
    left:  37px;
}
#marry{
    position: absolute;
    top: 195px;
    left:  210px;
}
#education{
    position: absolute;
    top: 165px;
    left:  210px;
}
#signature{
    position: absolute;
    top: 225px;
    left:  37px;
}
#contact{
    position: absolute;
    bottom: 10%;
    left:  60%;
}
#submit{
    position: absolute;
    bottom: 10%;
    left:  38%;
}
</style>

</head>
<body>
<div>
    <div id="box">
        <div id="picture">
        <img src="{{ afile }}" height="100px" width="100px" >
        </div>
    <h2 id='username'>姓名:{{ username }}</h2>
    <h2 id='phone'>电话:{{ phone }}</h2>
    <p id='gender'>性别: {{ gender }}</p>
    <p id='birthday'>生日: {{ birthday }}</p>
    <p id='marry'>婚姻状况: {{ marry }}</p>
    <p id='education'>学历: {{ education }}</p>
    <p id='signature'>自我介绍: {{ signature }}</p>
        <input id='submit' type="button" value="修改个人信息" onclick="submit()">
    </div>
</div>


<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/sketch.min.js"></script>


<script>
(function() {
  var Building, Skyline, dt, sketch, skylines;

  sketch = Sketch.create();

  sketch.mouse.x = sketch.width / 10;

  sketch.mouse.y = sketch.height;

  skylines = [];

  dt = 1;


  // BUILDINGS

  Building = function(config) {
    return this.reset(config);
  };

  Building.prototype.reset = function(config) {
    this.layer = config.layer;
    this.x = config.x;
    this.y = config.y;
    this.width = config.width;
    this.height = config.height;
    this.color = config.color;
    this.slantedTop = floor(random(0, 10)) === 0;
    this.slantedTopHeight = this.width / random(2, 4);
    this.slantedTopDirection = round(random(0, 1)) === 0;
    this.spireTop = floor(random(0, 15)) === 0;
    this.spireTopWidth = random(this.width * .01, this.width * .07);
    this.spireTopHeight = random(10, 20);
    this.antennaTop = !this.spireTop && floor(random(0, 10)) === 0;
    this.antennaTopWidth = this.layer / 2;
    return this.antennaTopHeight = random(5, 20);
  };

  Building.prototype.render = function() {
    sketch.fillStyle = sketch.strokeStyle = this.color;
    sketch.lineWidth = 2;
    sketch.beginPath();
    sketch.rect(this.x, this.y, this.width, this.height);
    sketch.fill();
    sketch.stroke();
    if (this.slantedTop) {
      sketch.beginPath();
      sketch.moveTo(this.x, this.y);
      sketch.lineTo(this.x + this.width, this.y);
      if (this.slantedTopDirection) {
        sketch.lineTo(this.x + this.width, this.y - this.slantedTopHeight);
      } else {
        sketch.lineTo(this.x, this.y - this.slantedTopHeight);
      }
      sketch.closePath();
      sketch.fill();
      sketch.stroke();
    }
    if (this.spireTop) {
      sketch.beginPath();
      sketch.moveTo(this.x + (this.width / 2), this.y - this.spireTopHeight);
      sketch.lineTo(this.x + (this.width / 2) + this.spireTopWidth, this.y);
      sketch.lineTo(this.x + (this.width / 2) - this.spireTopWidth, this.y);
      sketch.closePath();
      sketch.fill();
      sketch.stroke();
    }
    if (this.antennaTop) {
      sketch.beginPath();
      sketch.moveTo(this.x + (this.width / 2), this.y - this.antennaTopHeight);
      sketch.lineTo(this.x + (this.width / 2), this.y);
      sketch.lineWidth = this.antennaTopWidth;
      return sketch.stroke();
    }
  };


  // SKYLINES

  Skyline = function(config) {
    this.x = 0;
    this.buildings = [];
    this.layer = config.layer;
    this.width = {
      min: config.width.min,
      max: config.width.max
    };
    this.height = {
      min: config.height.min,
      max: config.height.max
    };
    this.speed = config.speed;
    this.color = config.color;
    this.populate();
    return this;
  };

  Skyline.prototype.populate = function() {
    var newHeight, newWidth, results, totalWidth;
    totalWidth = 0;
    results = [];
    while (totalWidth <= sketch.width + (this.width.max * 2)) {
      newWidth = round(random(this.width.min, this.width.max));
      newHeight = round(random(this.height.min, this.height.max));
      this.buildings.push(new Building({
        layer: this.layer,
        x: this.buildings.length === 0 ? 0 : this.buildings[this.buildings.length - 1].x + this.buildings[this.buildings.length - 1].width,
        y: sketch.height - newHeight,
        width: newWidth,
        height: newHeight,
        color: this.color
      }));
      results.push(totalWidth += newWidth);
    }
    return results;
  };

  Skyline.prototype.update = function() {
    var firstBuilding, lastBuilding, newHeight, newWidth;
    this.x -= (sketch.mouse.x * this.speed) * dt;
    firstBuilding = this.buildings[0];
    if (firstBuilding.width + firstBuilding.x + this.x < 0) {
      newWidth = round(random(this.width.min, this.width.max));
      newHeight = round(random(this.height.min, this.height.max));
      lastBuilding = this.buildings[this.buildings.length - 1];
      firstBuilding.reset({
        layer: this.layer,
        x: lastBuilding.x + lastBuilding.width,
        y: sketch.height - newHeight,
        width: newWidth,
        height: newHeight,
        color: this.color
      });
      return this.buildings.push(this.buildings.shift());
    }
  };

  Skyline.prototype.render = function() {
    var i;
    i = this.buildings.length;
    sketch.save();
    sketch.translate(this.x, (sketch.height - sketch.mouse.y) / 20 * this.layer);
    while (i--) {
      this.buildings[i].render(i);
    }
    return sketch.restore();
  };


  // SETUP

  sketch.setup = function() {
    var i, results;
    i = 5;
    results = [];
    while (i--) {
      results.push(skylines.push(new Skyline({
        layer: i + 1,
        width: {
          min: (i + 1) * 30,
          max: (i + 1) * 40
        },
        height: {
          min: 150 - (i * 35),
          max: 300 - (i * 35)
        },
        speed: (i + 1) * .003,
        color: 'hsl( 200, ' + (((i + 1) * 1) + 10) + '%, ' + (75 - (i * 13)) + '% )'
      })));
    }
    return results;
  };


  // CLEAR

  sketch.clear = function() {
    return sketch.clearRect(0, 0, sketch.width, sketch.height);
  };


  // UPDATE

  sketch.update = function() {
    var i, results;
    dt = sketch.dt < .1 ? .1 : sketch.dt / 16;
    dt = dt > 5 ? 5 : dt;
    i = skylines.length;
    results = [];
    while (i--) {
      results.push(skylines[i].update(i));
    }
    return results;
  };


  // DRAW

  sketch.draw = function() {
    var i, results;
    i = skylines.length;
    results = [];
    while (i--) {
      results.push(skylines[i].render(i));
    }
    return results;
  };


  // Mousemove Fix

  $(window).on('mousemove', function(e) {
    sketch.mouse.x = e.pageX;
    return sketch.mouse.y = e.pageY;
  });

}).call(this);

function contact(){
    window.location.href = '/' + 'index'
}

function submit(){
    window.location.href = '/' + 'person_info/info'
}

</script>

</body>
</html>